$(function(){
	var floorTop = [];
//	一/ 滚动条滚动效果包括以下三步
	//1.获取每一层楼到顶部的距离，将它们存入一个数组中
	$('.floor').each(function(i,k){
		var top = $(k).offset().top;//每一个楼层距离页面顶部的距离
		floorTop.push(top);
	})
	//2.通过滚动条滚过的距离，计算出滚到了那一层楼 index
	$(window).on('scroll',roll);
	function roll(){
		var rollLength = $(document).scrollTop();
		var index = getIndex(rollLength);
		focus(index);
	}
//	getIndex方法,用来根据页面滚过的距离,获得楼层索引 参数rollLength 就是页面滚过的距离
	function getIndex(rollLength){
		for(var i=0;i<floorTop.length;i++){
			if(rollLength>floorTop[i]-200&&rollLength<floorTop[i+1]-200){
				return i;
			}
			if(rollLength>floorTop[floorTop.length-1]-200){
				return floorTop.length-1;
			}
		}
	}
	//3.根据index楼层索引值，改变侧边栏楼层样式信息的显示
	function focus(index){
		$('.sideBar li').eq(index).addClass('active').siblings().removeClass('active');
	}
	//二、点击侧边栏楼侧序号，让页面滚动到对应位置。分以下两步
//	1.点击获取索引值
	$('.sideBar li').click(function(){
//		避免页面滚动时,触发滚动事件而改变边栏楼层的显示
		$(window).off('scroll');
		var index = $(this).index();
		focus(index);
		//	2.根据索引值,去楼层数组中取到滚动条应该滚过的距离
		var target = floorTop[index];
		//	3.让页面滚到对应的距离
		$('html,body').stop().animate({scrollTop:target},300,function(){
			$(window).on('scroll',roll);
		});
		
	})



})











